import React from 'react';
import { Collapse, CollapseProps, Space, Typography } from 'antd';
import { UserOutlined, BulbOutlined } from '@ant-design/icons';
import { GetProp } from 'antd/es';
import { Bubble } from '@ant-design/x';

// 信息格式化组件

// 提取思考内容的函数
function extractThinkContent(str: string) {
  // 检查是否包含思考标签
  const hasThinkTag = str.includes('<think>') && str.includes('</think>');
  if (!hasThinkTag) return null;

  // 获取第一个思考标签的位置
  const startIndex = str.indexOf('<think>') + '<think>'.length;
  const endIndex = str.indexOf('</think>');

  // 如果找到了完整的思考标签对，提取内容
  if (startIndex > 0 && endIndex > startIndex) {
    return str.substring(startIndex, endIndex);
  }

  // 如果只找到了开始标签但没有结束标签，返回从开始标签到字符串结束的内容
  // 这样可以实现流式输出思考过程
  if (startIndex > 0) {
    return str.substring(startIndex);
  }

  return null;
}

// 替换答案内容的函数
const replaceAnswer = (answerContent: string) => {
  // 将中文标点替换为 HTML 标签，并加粗步骤
  const htmlContent = answerContent
    .replace(/[。:]/g, '$&<br>')
    .replace(/\n/g, '<br>')
    .replace(/^(\d+).(.*?)$/, '<br>')
    .replace(
      /^(\d+)\.(.*)$/gm,
      (match, p1, p2) => `<div class="step">${p1}. <strong>${p2.trim()}</strong></div>`,
    );

  return { __html: htmlContent };
};

// AI消息渲染函数
const aiMessageRender = (items: string) => {
  const content = items;
  const thinkContent = extractThinkContent(content);

  // 移除思考内容
  let answerContent = content;
  if (thinkContent && content.includes('<think>') && content.includes('</think>')) {
    answerContent = content.replace(`<think>${thinkContent}</think>`, '');
  } else if (thinkContent && content.includes('<think>')) {
    // 如果只有开始标签，只移除开始标签和思考内容的部分
    answerContent = content.replace(`<think>${thinkContent}`, '');
  }

  const itemsCollapse: CollapseProps['items'] = [
    {
      key: '1',
      label: (
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <BulbOutlined style={{ color: '#1890ff' }} />
          <Typography.Text strong style={{ color: '#1890ff' }}>
            思考中...
          </Typography.Text>
        </div>
      ),
      children: (
        <div
          style={{
            color: '#333',
            background: '#f0f8ff',
            padding: '12px 16px',
            borderRadius: '8px',
            fontSize: '14px',
            lineHeight: '1.6',
            whiteSpace: 'pre-wrap',
            textAlign: 'justify',
          }}
        >
          {thinkContent}
        </div>
      ),
    },
  ];

  return (
    <Space direction="vertical" style={{ width: '100%', gap: '2px' }}>
      {thinkContent && (
        <Collapse
          items={itemsCollapse}
          ghost
          style={{
            marginBottom: '2px',
            background: '#f0f8ff',
            borderRadius: '8px',
            overflow: 'hidden',
          }}
        />
      )}

      <div
        className="markdown-content"
        style={{
          backgroundColor: '#f5f7fa',
          color: '#333',
          padding: '16px',
          borderRadius: '12px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)',
          fontSize: '14px',
          lineHeight: '1.8',
          border: '1px solid #e6f0fd',
        }}
        dangerouslySetInnerHTML={replaceAnswer(answerContent)}
      />
    </Space>
  );
};

// 导出角色配置
export const roles: GetProp<typeof Bubble.List, 'roles'> = {
  ai: {
    placement: 'start',
    typing: { step: 5, interval: 20 },
    avatar: {
      icon: <UserOutlined />,
      style: {
        background: 'linear-gradient(135deg, #1890ff, #52c41a)',
        color: 'white',
        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
      },
    },
    styles: {
      content: {
        borderRadius: 16,
        padding: '8px',
        background: 'transparent',
      },
    },
    header: 'Dynabook Knowledge AI Assistant',
    messageRender: aiMessageRender,
  },
  local: {
    placement: 'end',
    variant: 'shadow',
    avatar: {
      icon: <UserOutlined />,
      style: {
        background: 'linear-gradient(135deg, #722ed1, #eb2f96)',
        color: 'white',
        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
      },
    },
    styles: {
      content: {
        borderRadius: 16,
        background: '#f0f5ff',
        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)',
        color: '#333',
        fontSize: 14,
        lineHeight: 1.6,
        padding: '12px 16px',
        margin: '10px 0',
        whiteSpace: 'pre-wrap',
        border: '1px solid #d6e4ff',
      },
    },
  },
};

export default roles;
